<template>
  <div>
    <Temp title="视角切换">
      <div class="camera-lock">
        <label class="title">锁定视角：</label>
        <el-checkbox
          text-color="#ffffff"
          v-model="locked"
          @change="onLockedChange"
        >
          开启/关闭
        </el-checkbox>
      </div>
    </Temp>
  </div>
</template>

<script>
import Temp from '@/components/utool/components/temp'
import { getAction } from '@/utils/helper'

const spaceCameraController = {}

export default {
  inject: ['viewerId'],
  components: {
    Temp
  },
  data() {
    return {
      locked: false
    }
  },
  async created() {
    const { toolManager } = await getAction(this.viewerId)
    spaceCameraController[this.viewerId] =
      toolManager.spaceCameraController

    this.locked =
      !spaceCameraController[this.viewerId].enableTilt
  },
  methods: {
    onLockedChange(value) {
      spaceCameraController[this.viewerId].enableTilt =
        !value
    }
  }
}
</script>

<style lang="scss" scoped>
.camera-lock {
  min-width: 200px;
  padding: 12px;
  display: flex;
  align-items: center;
  background-color: #193b51;
  border-radius: 0 0 8px 8px;
}

.title {
  width: 100px;
  font-size: 14px;
  color: #fefefe;
}
</style>
